<script setup></script>

<template>
  <div class="page">
    <el-row :gutter="20">
      <el-col :span="4"
        ><el-button type="primary" @click="dialogVisible = true">show test</el-button></el-col
      >
      <el-col :span="4">23</el-col>
      <el-col :span="16">34</el-col>
    </el-row>
    <el-dialog title="test" v-model="dialogVisible" @close="handleClose">
      <TestDialog v-if="dialogVisible"></TestDialog>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'

import TestDialog from './TestDialog.vue'

const dialogVisible = ref(false)

const handleClose = () => {
  dialogVisible.value = false
}
</script>

<style scoped>
.page {
  padding: 0 10px;
  width: calc(100% - 20px);
  height: 100%;
}
</style>
